<template>
  <div>
    <todo-item v-for="item in todoList"
               :key='item.id'
               :item='item'
               @removeTodo='removeTodo'
               @setStatus='setStatus'
               @setDoing='setDoing'></todo-item>
  </div>

</template>
<script lang='ts'>
import { defineComponent, ref, PropType } from 'vue'
import { useTodo, IUseTodo } from '../hooks'
import { ITodo } from '../../typings/index'
import TodoItem from './item.vue'
export default defineComponent({
  name: 'Todolist',
  props: {
    todoList: Array as PropType<ITodo[]>,
  },
  components: { TodoItem },
  emits: [],
  mounted() {},
  setup(props, { attrs, slots, emit }) {
    const { removeTodo, setStatus, setDoing } = useTodo()
    return {
      removeTodo,
      setStatus,
      setDoing,
    }
  },
})
</script>
<style scoped lang='scss'>
</style>